<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<!-- 引入Bootstrap -->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

		<!-- bootstrap的javascript插件--需要引用jQuery -->
		<script src="bootstrap/js/jquery.min.js"></script>

		<!--包括所有已编译的插件-->
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div>
				<h3 class="text-center text-primary">Bootstrap 弹出框（Popover）插件</h3>
				弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。
				弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）<br>
			</div>

			<div>
				<h3 class="text-primary">用法</h3>
				1,通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。
				锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。<br>
				2,通过 JavaScript：通过 JavaScript 启用弹出框（popover）：$('#identifier').popover(options) <br>
				<p class="text-info bg-danger">
					弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。
					如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：
					$(function () { $("[data-toggle='popover']").popover(); });
				</p>
			</div>


			<div>
				<div class="container" style="padding: 100px 50px 10px;">
					<button type="button" class="btn btn-default" title="Popover title" data-container="body" data-toggle="popover"
					 data-placement="left" data-content="左侧的 Popover 中的一些内容">
						左侧的 Popover
					</button>
					<button type="button" class="btn btn-primary" title="Popover title" data-container="body" data-toggle="popover"
					 data-placement="top" data-content="顶部的 Popover 中的一些内容">
						顶部的 Popover
					</button>
					<button type="button" class="btn btn-success" title="Popover title" data-container="body" data-toggle="popover"
					 data-placement="bottom" data-content="底部的 Popover 中的一些内容">
						底部的 Popover
					</button>
					<button type="button" class="btn btn-warning" title="Popover title" data-container="body" data-toggle="popover"
					 data-placement="right" data-content="右侧的 Popover 中的一些内容">
						右侧的 Popover
					</button>
				</div>
		</div>

		</div>
		<script>
			$(function() {
				$("[data-toggle='popover']").popover();
			});
		</script>
	</body>
</html>
